<template>
    <div class="c-mainTheme-bg" :class="$style.sliderContainer">
        <!--<div :class="$style.headImage">-->
          <!--<img :src="userInfo.headImage" alt="">-->
          <!--<p class="b_FS-36 c_white" >{{ userInfo.userName }}</p>-->
        <!--</div>-->
        <photo />
        <div >
          <template v-for='(item, key) in itemList'>
            <slide-bar-item  @handleItemClick="$handleItemClick" :settings="item" :active="item.type == selectActive" ></slide-bar-item>
          </template>
        </div>
    </div>

</template>

<script type="text/babel">
    import SlideBarItem from './slideBarItem'
    import Photo from './imageUpload.vue'
    export default {
        name: "slideBar",
        props:{
          items : {
            type: Array ,
            default(){
              return []
            }
          },
          userInfo:{
            type: Object,
            default(){
              return {
                userName : 'Mr.Paul' ,
                headImage: 'http://thirdwx.qlogo.cn/mmopen/3Tjh0TkmicoaxPK2Ry0BdicL3q377xXB55YSKVKO5m9arWiaVuRdaIRsQX9wRsuWHWibH5PybIDYaMLaSUXia5f2Hbu6icewXXicJibT/132'
              }
            }}
        },
        components: { SlideBarItem, Photo },
        data() {
            return {
              selectActive :'' ,
              itemList : []
            }
        },
        created() {
        },
        mounted() {
          this.itemList = this.items
        },
        beforeDestroy() {
        },
        computed: {},
        methods: {
          $handleItemClick(type){
            this.selectActive = type
            this.$emit('handleItemClick', type )
          }
        }
    }
</script>

<style module lang='scss'>
  .sliderContainer{
    width: 550px ;
    height: 100vh ;
    .headImage{
      width: 100% ;
      height: 330px ;
      text-align: center;
      >img{
        width: 140px ;
        height: 140px ;
        border-radius: 100% ;
        border:8px solid white;
        margin-top: 20px;
        margin-bottom: 40px;
        box-shadow: 0px 15px 10px #26a2ff;
      }
      >p{
        width: 100%;
        text-align: center;
      }
    }
  }
</style>
